<template>
	<view class="learn-container">
		<view class="nav">
			<view class="nav-item" :class="curTab === 0 ? 'active':''" @click="curTab = 0">基础知识</view>
			<view class="nav-item" :class="curTab === 1 ? 'active':''" @click="curTab = 1">厨房准备</view>
			<view class="nav-item" :class="curTab === 2 ? 'active':''" @click="curTab = 2">食材准备</view>
		</view>
		<view class="main" v-if="curTab === 0">
			<view class="title">烹饪方法</view>
			<view class="content">
				<view class="title">一、炒</view>
				<view class="text">1.先将锅烧热</view>
				<view class="text">2.再倒入适量油</view>
				<view class="text">3.油热后放入食材，大火迅速翻炒，使食材受热均匀。</view>
				<view class="hint">根据食材的易熟程度先后放入，如先放不易熟的根茎类蔬菜，后放易熟的叶菜</view>
				<view class="hint">调味通常在食材快熟时进行，以避免调料长时间受热而失去风味</view>
				<view class="title">二、煎</view>
				<view class="text">1.先将锅烧热</view>
				<view class="text">2.再倒入适量油</view>
				<view class="text">3.油热后放入食材，中小火慢慢煎至两面金黄</view>
			</view>
		</view>
		<view class="main" v-if="curTab === 1">
			<view class="title">电器</view>
			<view class="content">
				燃气灶、抽油烟机、冰箱、微波炉、烤箱
			</view>
			<view class="title">炊具</view>
			<view class="content">
				炒锅、炖锅、蒸锅、汤锅、平底锅、电饭锅、高压锅
			</view>
			<view class="title">烹饪工具</view>
			<view class="content">
				锅铲、汤勺、漏勺、打蛋器、擀面杖
			</view>
			<view class="title">其他工具</view>
			<view class="content">
				<view>案板、菜刀、削皮刀</view>
				<view>抹布、钢丝球、洗涤剂</view>
				<view>保鲜袋、保鲜膜</view>
			</view>
			<view class="title">调味品</view>
			<view class="content">
				<view>食用油</view>
				<view>酱油</view>
				<view>盐</view>
				<view>黑醋、白醋</view>
				<view>鸡精/味精</view>
				<view>生抽、老抽、蚝油</view>
				<view>料酒</view>
				<view>白糖</view>
				<view>孜然粉、孜然粒</view>
				<view>玉米淀粉、红薯淀粉</view>
				<view>黑胡椒粉、白胡椒粉</view>
				<view>花椒、八角、桂皮、香叶</view>
				<view>葱、姜、蒜</view>
			</view>
		</view>
		<view class="main" v-if="curTab === 2">
			<view>新鲜度</view>
			<view>应季性</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curTab: 0,
			}
		},
		methods: {
			
		}
	}
</script>

<style>
page{
	height: 100%;
}
.learn-container{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.nav{
	display: flex;
	height: 80upx;
}
.nav-item{
	flex: 1;
	text-align: center;
	font-weight: bold;
	font-size: 32upx;
	padding: 20upx;
	background-color: #f8f8f8;
}
.nav-item.active{
	background-color: #fff;
}
/*  */
.main{
	padding: 30upx;
	font-size: 30upx;
	flex: 1;
	overflow: auto;
}
.title{
	font-size: 34upx;
	line-height: 1.5;
	font-weight: 900;
}
.hint{
	font-size: 28upx;
	color: gray;
	text-indent: 2em;
}
.text{
	text-indent: 2em;
}
.content{
	padding: 20upx;
}
</style>
